<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@ page import="com.CGFrame.struts.POJOs.Shot" %>
<%@ page import="com.CGFrame.struts.POJOs.Shotgroup" %>
<%@ page import="com.CGFrame.struts.POJOs.Catemodel" %>
<%@ page import="com.CGFrame.struts.bean.unit.ShotGroupBean" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Relate Model </title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<LINK href="../styles/sciencee.css"  type=text/css rel=stylesheet>
	<script language=javascript>
		function showImg(name){
			var a=document.getElementById("modelImg");
			a.setAttribute("src","<%=request.getContextPath() %>/categorySet/images/"+name+".jpg");
		}
	function create1(){
  		var radios = document.getElementsByName("rd");
  		var haveSelectedRadio=false;
		for(var i=0;i<radios.length;i++){
  			if(radios[i].checked==true){
  				var id=radios[i].getAttribute("id");
				setModel(radios[i].value,id);
				haveSelectedRadio=true;
			}
  		}
  		if(!haveSelectedRadio){
  			alert('<bean:message key="selectmodelplease"/>!');
  		}
	}
	function setModel(cmodel,id){
		var checks=document.getElementsByName("shotCheck");
		if(navigator.appName=="Microsoft Internet Explorer"){
			for(var i=0;i<checks.length;i++){
				if(checks[i].checked==true){
					checks[i].checked=false;
					var a=checks[i].parentNode.nextSibling.nextSibling;
					a.innerHTML=cmodel;
					a.setAttribute("id",id);
				}
			}
  		}else{
  			for(var i=0;i<checks.length;i++){
  				if(checks[i].checked==true){
  					checks[i].checked=false;
					var a=checks[i].parentNode.nextSibling.nextSibling.nextSibling.nextSibling;
					a.innerHTML=cmodel;
					a.setAttribute("id",id);
				}
			}
		}
		var checkAll=document.getElementById("selA");
		checkAll.checked=false;
	}
	function submitAll(){
		var shots=new Array();
		var models=new Array();
		var tds=document.getElementsByTagName("td");
		for(var i=0;i<tds.length;i++){
			if(tds[i].getAttribute("name")=="shotName"){
				shots.push(tds[i].getAttribute("id"));
			}
			if(tds[i].getAttribute("name")=="modelName"){
				models.push(tds[i].getAttribute("id"));
			}
		}
		var ar=new Array();
		var shotResult="";
		var v="0";
		for (var j=0;j<shots.length;j++){
			if(models[j]!=null && models[j]!=""){
				var vArr=new Array(models[j],shots[j]);
				ar.push(vArr);
				ar.sort();
			}
		}
		for(var k=0;k<ar.length;k++){
			if((ar[k])[0]!=v){
				v=(ar[k])[0];
				shotResult+=";"+(ar[k])[0]+":"+(ar[k])[1];
			}else{
				shotResult+=","+(ar[k])[1];
			}
		}
		var sModel=document.getElementById("sModel");
		sModel.value=shotResult;
		var form1=document.getElementById("form1");
		form1.submit();
	}
	function changeScene(id){
			var sel=document.getElementById("epSelect").value;
			hidSelect();
			if(sel=="0"){
				var trs=document.getElementsByTagName("tr");
				for(j=0;j<trs.length;j++){
					if(trs[j].getAttribute("name")=="shotInfo"){
						trs[j].style.display="";
					}
				}
			}else{
				var vsel=document.getElementById(sel);
				vsel.style.display="";
			}
		}
		function hidSelect(){
			var sels=document.getElementsByName("vSel");
			for(var i=0;i<sels.length;i++){
				sels[i].style.display="none";
			}
		}
		function selectAll(){
			var check=document.getElementById("selA");
			var checks=document.getElementsByName("shotCheck");
			for(var i=0;i<checks.length;i++){
				checks[i].checked=check.checked;
			}
		}
		function undo1(){
			var checks=document.getElementsByName("shotCheck");
			if(navigator.appName=="Microsoft Internet Explorer"){
				for(var i=0;i<checks.length;i++){
					if(checks[i].checked==true){
						checks[i].checked=false;
						var a=checks[i].parentNode.nextSibling.nextSibling;
						a.innerHTML="";
						a.setAttribute("id","");
					}
				}
  			}else{
  				for(var i=0;i<checks.length;i++){
  					if(checks[i].checked==true){
  						checks[i].checked=false;
						var a=checks[i].parentNode.nextSibling.nextSibling.nextSibling.nextSibling;
						a.innerHTML="";
						a.setAttribute("id","");
					}
				}
			}
		}
		function changeShot(id){
			var trs=document.getElementsByTagName("tr");
			for(j=0;j<trs.length;j++){
				if(trs[j].getAttribute("name")=="shotInfo"){
					trs[j].style.display="none";
				}
			}
			var sel=document.getElementById(id);
			if(sel.value=="0"){
				var vids="";
				var options=sel.options;
				for(var i=0;i<options.length;i++){
					vids+=options[i].getAttribute("value")+",";
				}
				var ids=vids.split(",");
				showShotRow(ids);
			}else{
				var ids=sel.value.split(",");
				showShotRow(ids);
			}
		}
		function showShotRow(ids){
			for(var i=0;i<ids.length;i++){
				if(ids[i]!=null && ids[i]!="" && ids[i]!="0"){
					var td=document.getElementById(ids[i]);
					td.parentNode.style.display="";
				}
			}
		}
	</script>
    <style type="text/css">
<!--
.STYLE1 {font-size: 12px}
-->
    </style>
<LINK href="styles/stylewang.css"  type=text/css rel=stylesheet>	
<style type="text/css">
<!--
.STYLE2 {
	font-family: "宋体";
	font-size: 12;
}
-->
</style>
</head>
  
  <body >
    <form id="form1" action="<%=path %>/project/relateShotModel.do" method=POST>
    <center>
      <span class="STYLE1"><bean:message key="setmodelforshots"/></span>
    </center>
    <input type="hidden" name="shots" id="sModel">
    <input type="hidden" name="projectId" value="<%=request.getAttribute("projectId") %>">
    <table border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td><span class="STYLE2"><bean:message key="episode"/><select id="epSelect" onChange="changeScene();">
    			<option value="0"><bean:message key="selectall"/></option>
<%
	Set epList=(Set)request.getAttribute("epList");
	for(Iterator iter=epList.iterator();iter.hasNext();){
		Shotgroup eps=(Shotgroup)iter.next();
%>
				<option value="<%=eps.getShotGroupId() %>"><%=eps.getShotGroupName() %></option>
<%}%>		</select></span></td>
<td><span class="STYLE2"><bean:message key="scene"/>
  
    <%
	for(Iterator iter=epList.iterator();iter.hasNext();){
		Shotgroup ep=(Shotgroup)iter.next();
%>
  
  <select id="<%=ep.getShotGroupId()%>" name="vSel" style="display:none" onChange="changeShot('<%=ep.getShotGroupId()%>');">
	<option value="0"><bean:message key="selectall"/></option>
<%
		Set scene=ep.getShotgroups();
		ShotGroupBean sgb=null;
		for(Iterator iter1=scene.iterator();iter1.hasNext();){
			Shotgroup sg=(Shotgroup)iter1.next();
			sgb=new ShotGroupBean(sg);
%>
			<option value="<%=sgb.getAllShotsId() %>"><%=sg.getShotGroupName() %></option>
<%}%>
		</select>
<%} %>		  </span></td>
    	</tr>
    </table>
    <table border="0" cellpadding="0" cellspacing="0" width="790">
    <tr><td valign="top">
    	<table id="shots" border="0" cellpadding="0" cellspacing="0" width="260">
    	<tr>
    		<td class="btleftbian"><input id="selA" type="checkbox" onClick="selectAll();"></td>
    		<td class="btcenterbian"><bean:message key="selectall"/></td>
    		<td class="btcenterbian"><bean:message key="shot.name"/></td>
    		<td class="btrightbian"><bean:message key="modelselected"/></td>
    	</tr>
    	<%
    		LinkedHashSet list1=(LinkedHashSet)request.getAttribute("shotList");
    		for(Iterator iter=list1.iterator();iter.hasNext();){
    			Shot shot=(Shot)iter.next();
    	%>
    	<tr name="shotInfo">
    		<td colspan="2" class="leftcenter"><input type="checkbox" name="shotCheck" value="<%=shot.getShotId() %>"></td>
    		<td class="leftcenter" id="<%=shot.getShotId()%>" name="shotName"><%=shot.getShotName() %></td>
    		<td class="rightcenter" name="modelName">&nbsp;</td>
    	</tr>
    	<%} %>
		<tr><td colspan="4" valign="top" class="tdtop">&nbsp;</td></tr>
    	</table>

    </td>
    <td>
    	<table border="0" cellpadding="0" cellspacing="0" width="360">
    	<tr>
    		<td class="btleftbian"><bean:message key="model"/></td>
    		<td class="btcenterbian"><bean:message key="modelname"/></td>
    		<td class="btcenterbian"><bean:message key="modeltype"/></td>
    		<td class="btrightbian"><bean:message key="modeldes"/></td>
    	</tr>
    	<%
    		List models=(List)request.getAttribute("shotModels");
    		for(Iterator iter=models.iterator();iter.hasNext();){
    			Catemodel shotModel=(Catemodel)iter.next();
    	%>
    		<tr>
    			<td class="leftcenter">
    			<input id="<%=shotModel.getCateModelId() %>" type="radio" name="rd" value="<%=shotModel.getCateModelName() %>" onClick="showImg('<%=shotModel.getCateModelName() %>');">
    			</td>
    			<td class="leftcenter"><%=shotModel.getCateModelName() %></td>
    			<td class="leftcenter"><%=shotModel.getCateModelType() %></td>
    			<td class="rightcenter"><%=shotModel.getDescription() %></td>
    		</tr>
    	<%} %>
		<tr><td class="tdtop" colspan="4">&nbsp;</td></tr>
    	<tr><td><input type="button" value="Create" onClick="create1();"></td>
    		<td><input type="button" value="Undo" onClick="undo1();"></td>
    	</tr>
    	</table>
    </td>
    <td><img id="modelImg" alt='<bean:message key="previewpictureofdirectory"/>'></td>
    </tr>
    </table>
    <input type="button" onClick="submitAll();" value="<bean:message key='submit'/>">
    <input type="reset" value="<bean:message key='reset'/>">
    <input type="button" value="<bean:message key='back'/>" onClick="history.back();">
    </form>
  </body>
</html>
